<template>
  <nut-transition
    :show="isVisible"
    name="slide-down"
    class="screen-saver"
    @click="closeScreenSaver"
    overflow-hidden
    z-999
    w-screen
    h-screen
  >
    <!-- <nut-swiper
      w-screen
      h-screen
      :pagination-visible="false"
      :init-page="swiperPage"
      :loop="true"
      ref="swiper"
      auto-play="3000"
    >
      <nut-swiper-item v-for="(item, index) in result" :key="item">
        <image mode="aspectFill" w-screen h-screen :src="item"></image>
      </nut-swiper-item>
    </nut-swiper> -->
    <swiper
      w-screen
      h-screen
      :circular="true"
      :autoplay="true"
      :interval="5000"
    >
      <swiper-item v-for="(item, index) in result">
        <image mode="aspectFill" w-screen h-screen :src="item"></image>
      </swiper-item>
    </swiper>
  </nut-transition>
  <!-- <div v-if="isVisible" class="screen-saver" @click="closeScreenSaver">
    <swiper
      w-screen
      h-screen
      :circular="false"
      :autoplay="true"
      :interval="3000"
    >
      <swiper-item v-for="(item, index) in result">
        <image w-screen h-screen :src="item"></image>
      </swiper-item>
    </swiper>
  </div> -->
</template>

<script setup lang="ts">
import { getWaitPicsData } from '@/api/index'
const emit = defineEmits(['close'])
const result = ref<Array<string>>([])
const props = defineProps<{
  visible: boolean
}>()
const isVisible = ref(props.visible)
watch(
  () => props.visible,
  (newValue) => {
    isVisible.value = newValue
  }
)

const swiperPage = ref<number>(1)
const swiper = ref<any>(null)

const closeScreenSaver = () => {
  emit('close')
}

async function init() {
  const res = await getWaitPicsData()
  result.value = res.data.data.map((i: any) => i.picUrl)
}

onMounted(() => {
  init()
  // 监听用户操作
})
</script>

<style scoped>
.screen-saver {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
</style>
